<template>
    <div class="service-help">
        <div v-if="showCate" class="help-title">服务商类目</div>
        <div v-if="showCost" class="help-title">
            小竹企服服务商（代理记账类）体系
        </div>
        <div v-if="showCate" class="cate">
            <div class="table-label">
                <div style="width: 200px">服务类型</div>
                <div style="width: 185px">一级服务</div>
                <div style="width: 731px">二级服务</div>
            </div>
            <div v-for="items in cate" :key="items.id" class="table-item">
                <div class="on-cate">{{ items.name }}</div>
                <div class="cate-list">
                    <div
                        v-for="item in items.two"
                        :key="item.id"
                        class="two-third-cate"
                    >
                        <div class="two-cate">{{ item.name }}</div>
                        <div class="third-cate">
                            <span v-for="third in item.third" :key="third.id">{{
                                third.name
                            }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="showCost" class="cost">
            <div class="table-label">
                <div style="width: 140px">服务商类别</div>
                <div style="width: 180px">服务质量保证金</div>
                <div style="width: 140px">收费标准</div>
                <div style="width: 266px">数量限制</div>
                <div style="width: 380px">服务商权益</div>
                <!-- <div style="width: 210px">特殊要求</div> -->
            </div>
            <div class="table-item">
                <div class="cell-1">官方服务商</div>
                <div class="cell-2">{{ allCost["1_margin"] }}元</div>
                <div class="cell-3">{{ allCost["1_upkeep"] }}元/年</div>
                <div class="cell-4">按城市每个区一个官方服务商</div>
                <div class="cell-5">
                    <p>1、有“官方”标识；</p>
                    <p>2、排名置顶 ；</p>
                    <p>
                        3、官方服务商每年在平台至少成交10单，若不满10单，平台将给予每单500元的补贴；
                    </p>
                    <p>4、平台自由接单。</p>
                </div>
                <!-- <div class="cell-6">
                    必须是一级代理商，且每年推广不低于12000个用户。（用户在平台产生的收益，平台与服务商分成，详见代理商体系）
                </div> -->
            </div>
            <!-- <div class="table-item">
                <div class="cell-1">金牌服务商</div>
                <div class="cell-2">{{ allCost["2_margin"] }}元</div>
                <div class="cell-3">{{ allCost["2_upkeep"] }}元/月</div>
                <div class="cell-4">每个区1家</div>
                <div class="cell-5">
                    <p>1、有金牌标识； </p>
                    <p>2、排名仅次于官方服务商； </p>
                    <p>
                        3、平台自由接单。
                    </p>
                </div>
                <div class="cell-6">
                    /
                </div>
            </div>
            <div class="table-item">
                <div class="cell-1">银牌服务商</div>
                <div class="cell-2">{{ allCost["3_margin"] }}元</div>
                <div class="cell-3">{{ allCost["3_upkeep"] }}元/月</div>
                <div class="cell-4">每个区2家</div>
                <div class="cell-5">
                    <p>1、有银牌标识； </p>
                    <p>2、排名仅次于金牌服务商； </p>
                    <p>
                        3、平台自由接单。
                    </p>
                </div>
                <div class="cell-6">
                    /
                </div>
            </div>
            <div class="table-item">
                <div class="cell-1">铜牌服务商</div>
                <div class="cell-2">{{ allCost["4_margin"] }}元</div>
                <div class="cell-3">{{ allCost["4_upkeep"] }}元/月</div>
                <div class="cell-4">每个区3家</div>
                <div class="cell-5">
                    <p>1、有铜牌标识； </p>
                    <p>2、排名仅次于银牌服务商； </p>
                    <p>
                        3、平台自由接单。
                    </p>
                </div>
                <div class="cell-6">
                    /
                </div>
            </div> -->
            <div class="table-item">
                <div class="cell-1">一般服务商</div>
                <div class="cell-2">2000元</div>
                <div class="cell-3">不收费</div>
                <div class="cell-4">不限</div>
                <div class="cell-5">
                    <p>1、入驻时间、按交易数量及评价排名；</p>
                    <p>
                        2、平台自由接单。
                    </p>
                </div>
                <!-- <div class="cell-6">
                    /
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import { getallcate, getall_cost } from "@/assets/api/service";
export default {
    components: {},
    head() {
        return {
            title: "服务商帮助-【小竹财税平台】",
            meta: [
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税,服务商,小竹企服,服务商帮助",
                },
            ],
        };
    },
    layout: "serverHome",
    data() {
        return {
            showCate: false,
            showCost: false,
            cate: [],
            allCost: [],
        };
    },
    watch: {},
    beforeMount() {},
    mounted() {
        if (this.$route.query.type == "allCate") this.getallcate();
        if (this.$route.query.type == "allCost") this.getall_cost();
    },
    computed: {},
    beforeDestroy() {},
    methods: {
        async getallcate() {
            this.showCate = true;
            const res = await getallcate({});
            if (res.code == 1) {
                this.cate = res.data;
            }
        },

        async getall_cost() {
            const res = await getall_cost({});
            if (res.code == 1) {
                this.allCost = res.data;
                this.allCost['1_upkeep'] = '5000'
                this.allCost['2_upkeep'] = '5000'
                this.allCost['3_upkeep'] = '3000'
                this.allCost['4_upkeep'] = '2000'
                this.allCost['5_upkeep'] = '0'
                this.showCost = true;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.service-help {
    width: 1200px;
    background-color: #ffffff;
    margin: 24px auto;
    padding: 50px 0 80px 0;
}

.help-title {
    font-size: 28px;
    font-weight: 600;
    color: #333333;
    text-align: center;
}

.cate {
    width: 1116px;
    margin: 0 auto;
    margin-top: 50px;
    .table-label {
        height: 50px;
        display: flex;
        div {
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #3480f7;
            font-size: 16px;
            color: #ffffff;
        }
    }

    .table-item {
        display: flex;
        .on-cate {
            min-width: 200px;
            width: 200px;
            background: #e0ecff;
            font-size: 16px;
            font-weight: 600;
            color: #333333;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid #a0b6da;
        }
        .cate-list {
            .two-third-cate {
                display: flex;

                font-size: 12px;
                color: #333333;
                .two-cate {
                    border-right: 1px solid #dcdcdc;
                    border-bottom: 1px solid #dcdcdc;
                    min-width: 185px;
                    width: 185px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
                .third-cate {
                    width: 731px;
                    border-right: 1px solid #dcdcdc;
                    border-bottom: 1px solid #dcdcdc;
                    padding: 15px 44px;
                    padding-right: 0;
                    line-height: 26px;
                    display: flex;
                    flex-wrap: wrap;
                    span {
                        padding-right: 12px;
                        display: block;
                    }
                }
            }
        }
    }
}

.cost {
    width: 1116px;
    margin: 0 auto;
    margin-top: 50px;
    .table-label {
        height: 50px;
        display: flex;
        div {
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #3480f7;
            font-size: 16px;
            color: #ffffff;
        }
    }

    .table-item {
        display: flex;
        border-left: 1px solid #dcdcdc;
        > div {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #333333;
            border-right: 1px solid #dcdcdc;
            border-bottom: 1px solid #dcdcdc;
            line-height: 23px;
            padding: 27px 25px;
        }
        .cell-1 {
            width: 140px;
        }
        .cell-2 {
            width: 180px;
        }
        .cell-3 {
            width: 140px;
        }
        .cell-4 {
            width: 266px;
        }
        .cell-5 {
            display: block;
            width: 380px;
        }
        .cell-6 {
            width: 210px;
        }
    }
}
</style>